import React from 'react';
import { Menu, Button, Icon } from 'antd';
import { WeaInputSearch, WeaLocaleProvider } from 'ecCom';
import { observer } from 'mobx-react';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class AppGroupList extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div className="edc-task-left">
                <div className="search-wrapper-group">
                <span onClick={this.clickAll} className="search-all" title={getLabel(510794,'全部分组')}>{getLabel('510794','全部分组')}</span>
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@ubir1j`} onSearch={this.onSearch} onChange={this.onSearch} placeholder={getLabel('511884','搜索分组')} />
                </div>
                <div className="list-wrapper">
                    <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@p0m82v`}
                        onClick={this.onClick}
                        selectedKeys={store.selectedGroupType ? [store.selectedGroupType] : ['']}
                    >
                    {/* <Button onClick={store.showAppGroupDialog} className="add-group-btn" icon="plus" ></Button> */}
                        {/* <Menu.ItemGroup key="g1" title={<div><span className ="add-group-title">应用分组</span></div>}> */}
                            {store.groupTypes.map(menu => (
                                <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@0waxay@${menu.id}`} key={menu.id} className="no-line-height">
                                    <div className="main">
                                        <div style={{display:'flex'}}>
                                            <div className='edc-app-groupName' title={menu.groupName}>{menu.groupName}</div>
                                            <div className="right" title={getLabel(332,"全部")}>
                                                <span className="doing">{menu.totalCount}</span>
                                                {/* { menu.id != '-1' && menu.notMine != '1' && <div className="menu-item-opts">
                                                    <Icon type="edit" onClick={(event) => this.showAppGroupDialog(event, menu)} title="修改"></Icon>
                                                    <Icon type="delete" onClick={(event) => this.deleteAppGroup(event, menu)} title="删除"></Icon>
                                                </div>} */}
                                                {/* <span>/</span>
                                            <span className="done">{menu.multiCount}</span> */}
                                            </div>
                                        </div>
                                    </div>
                                    {/* <div className="desc">
                                        <span>{menu.creator}</span>
                                        <span>{menu.createDate}</span>
                                        <span>{menu.createTime}</span>
                                    </div> */}
                                </Menu.Item>
                            ))}
                        {/* </Menu.ItemGroup> */}
                        {/* <Menu.ItemGroup key="g1" title={<div><span className ="add-group-title">分享给我</span></div>}>
                            {store.shareGroupTypes.map(menu => (
                                <Menu.Item key={menu.id} className="no-line-height">
                                    <div className="main">
                                        {menu.groupName + (menu.notMine == '1' ? ("("+menu.creator+")"):"")}
                                        <div className="right" title="全部">
                                            <span className="doing">{menu.totalCount}</span>
                                        </div>
                                    </div>
                                </Menu.Item>
                            ))}
                        </Menu.ItemGroup> */}
                    </Menu>
                </div>
            </div>
        )
    }
    onSearch = (searchValue) => {
        const { store } = this.props;
        store.setLeftSearchValue(searchValue);
    }
    onClick = (menu) => {
        const { store } = this.props;
        store.changeSelectedGroupType(menu.key);
    }
    clickAll = () => {
        this.onClick({ key: '' });
    }

    showAppGroupDialog = (event, menu) => {
        if (event) {
            event.stopPropagation();
        }
        const { store } = this.props;
        store.showAppGroupDialog(menu);
    }

    deleteAppGroup = (event, menu) => {
        if (event) {
            event.stopPropagation();
        }
        const { store } = this.props;
        store.deleteAppGroup(menu);
    }
}